<template>
    <basic-container>
      <avue-crud
        :option="option"
        :search.sync="search"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @sort-change="sortChange"
        @on-load="onLoad"
      >
        <!-- @on-load="onLoad" -->
        <template slot="menuLeft">
           <div class="curd-foter">
            <div class="redFontBox">储值余额：<span class="redFont">{{ exhibition(statisticsData.balance) || 0 }}</span> 元</div>
            <div class="redFontBox">累计充值金额：<span class="redFont">{{ exhibition(statisticsData.rechargeAmount) || 0 }}</span> 元</div>
            <div class="redFontBox">累计消费金额：<span class="redFont">{{ exhibition(statisticsData.tradeAmount) || 0 }}</span> 元</div>
            <div class="redFontBox">累计消费笔数：<span class="redFont">{{ exhibition(statisticsData.tradeCount) || 0 }}</span> 笔</div>
           </div>
        </template>
        <template slot="menuRight">
          <el-button
            type="warning"
            size="small"
            plain
            icon="el-icon-download"
            v-if="permission.summaryOfCashback_export"
            @click="handleExport"
            >导出
          </el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button
            icon="el-icon-view"
            size="small"
            type="text"
            @click.stop="handleDetail(scope.row, scope.index)"
            >详 情</el-button
          >
        </template>
      </avue-crud>
    </basic-container>
  </template>
  
    <script>
  import { getList, getStatistics, getExport } from "@/api/rb-merchant/rpiMemberOem/rpi_member_oem";
  
  import { mapGetters } from "vuex";
  import selectPage from "@/components/select-page/select-page";
  
  export default {
    components: {
      selectPage,
    },
    data() {
      return {
        form: {},
        query: {},
        search: {},
        loading: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        selectionList: [],
        statisticsData: {},
        option: {
          height: "calc(50vh - 50px)",
          calcHeight: 30,
          tip: false,
          border: true,
          index: true,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          selection: true,
          searchMenuSpan: 24,
          columnBtn: false,
          labelWidth: 120, //弹出表单的标题的统一宽度
          searchLabelWidth: 120, //搜索框标题宽度
          menuWidth: 100, //操作栏宽度
          emptyBtnText: "重置",
          // searchIcon:true,
          // searchIndex:3,
          menu: true,
          column: [
            {
              label: "会员编号",
              searchLabel: "会员编号",
              prop: "rpiMemberNo",
              type: "input",
              search: true,
              overHidden: true,
              minWidth: 100,
            },
            {
              label: "会员ID",
              prop: "memberNo",
              type: "input",
              overHidden: true,
              minWidth: 100,
            },
            {
              label: "会员昵称",
              prop: "memberName",
              type: "input",
              search: true,
              minWidth: 150,
            },
            {
              label: "联系方式",
              prop: "mobile",
              type: "input",
              search: true,
              minWidth: 150,
            },
            {
              label: "会员类型",
              prop: "rpiMemberType",
              type: "select",
              dataType: "number",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              search: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=rpi_member_type",
              minWidth: 150,
            },
            {
              label: "会员等级",
              prop: "memberLevel",
              type: "select",
              dataType: "number",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              search: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=rpi_member_level",
              minWidth: 150,
            },
            {
              label: "会员状态",
              prop: "rpiMemberStatus",
              type: "select",
              dataType: "number",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              search: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=rpi_member_status",
              minWidth: 150,
            },
            {
              label: "储值账号余额",
              prop: "balance",
              type: "input",
              minWidth: 180,
            },
            {
              label: "累计充值金额",
              prop: "rechargeAmount",
              type: "input",
              minWidth: 180,
            },
            {
              label: "累计消费金额",
              prop: "tradeAmount",
              type: "input",
              minWidth: 180,
            },
            {
              label: "累计消费笔数",
              prop: "tradeCount",
              type: "input",
              minWidth: 180,
            },
            {
              label: "注册日期",
              prop: "createTime",
              type: "datetimerange",
              searchRange: true,
              defaultTime: ['00:00:00', '23:59:59'],
              format: 'yyyy-MM-dd HH:mm:ss',
              valueFormat: 'yyyy-MM-dd HH:mm:ss',
              startPlaceholder: "开始时间",
              endPlaceholder: "结束时间",
              search: true,
              hide: true,
              display: false,
              searchSpan: 12,
              minWidth: 180
            }
          ],
        },
        data: [],
      };
    },
    computed: {
      ...mapGetters(["permission", "selectMer"]),
      permissionList() {
        return {
          viewBtn: this.vaildData(this.permission.summaryOfCashback_view, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      exhibition() {
        return (val) => {
          if (val == "" || val == "-1") {
            return (val = 0);
          } else {
            return val;
          }
        };
      },
    },
    methods: {
      /**
      * @func 详情
      * @desc 点击详情进入详情界面
      * @param {Object} row - 商户信息
      * */
      handleDetail(row) {
        this.$router.push({
            path: "/rb-merchant/rpiMemberOem/rpi_member_details",
            query: {
              d: this.$crypto.encrypt(JSON.stringify({
                rpiMemberNo: row.rpiMemberNo,
              }))
            }
          });
      },
      /**
       * @func edit,view 打开之前回调
       * @desc 点击获取点击天数时间
       * */
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          // getDetail(this.form.id).then(res => {
          //   this.form = res.data.data;
          // });
        }
        done();
      },
      /**
       * @func 重置
       * @desc 重置查询条件
       * */
      searchReset() {
        this.query = {};
        this.search = {};
        this.onLoad(this.page);
      },
      /**
       * @func 搜索
       * @desc 根据条件查询
       * @param {params} params --- 条件查询
       * */
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      /**
       * @func 选中单元格
       * @desc 选中单元格数据
       * @param {list} list --- 选中单元格数据-数组
       * */
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      /**
       * @func 分页页码
       * @desc 分页页码改变时会触发
       * */
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        // this.refreshChange();
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 当前页个数
       * @desc pageSize改变时会触发
       * */
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        // this.refreshChange();
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 刷新
       * @desc 点击刷新按钮触发该事件
       * */
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 初始化
       * @desc 表格初始化查询数据
       * */
      onLoad(page, params = {}) {
        this.loading = true;
        let paramObj = Object.assign(params, this.query);
        if (!this.validatenull(paramObj.createTime)) {
          paramObj.beginTime = paramObj.createTime[0] || "";
          paramObj.endTime = paramObj.createTime[1] || "";
        }
        delete paramObj.createTime;
        
        getList(page.currentPage, page.pageSize, Object.assign(paramObj, {'rpiNo': this.selectMer.rpiNo})).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });

        getStatistics(page.currentPage, page.pageSize, paramObj).then((res) => {
            this.statisticsData = res.data.data;
        });
      },
      /**
       * @func 导出
       * @desc 根据条件导出
       * */
      handleExport() {
        let paramObj = this.query;
        if (!this.validatenull(paramObj.createTime)) {
          paramObj.beginTime = paramObj.createTime[0] || ''
          paramObj.endTime = paramObj.createTime[1] || ''
        }
        delete paramObj.createTime

        this.$confirm("是否导出用户数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          getExport(paramObj).then((res) => {
              downloadFileExcel(res);
            },
            (error) => {
              window.console.log(error);
            }
          );
        });
      },
      /**
       * @func 排序
       * @desc 根据表格字段排序
       * */
      sortChange(val) {
        if (val.order == "ascending") {
          //正序
          this.query.ascs = val.prop;
          this.query.descs = "";
        } else {
          //倒序
          this.query.descs = val.prop;
          this.query.ascs = "";
        }
        this.refreshChange();
      },
    },
  };
  </script>
  
    <style lang="scss" scoped>
  .curd-foter {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .redFontBox {
    margin-right: 40px;
    .redFont {
      color: red;
    }
  }
  /deep/ .el-tag--dark.el-tag--success {
    border: none !important;
  }
  </style>
  